<template>
  <div class="homepage">
    <div class="pageLeft">
      <!-- 置顶视频 -->
      <div class="section topVideo" v-if="isMyPage">
        <!-- 头部tab -->
        <div class="topTabs">
          <div class="be-tab">
            <ul class="tabInner">
              <li class="be-tab-item is-active">
                <input type="radio" class="tabInput" value="" name="" />
                <span>我的粉丝会看到</span>
              </li>
              <li class="be-tab-item">
                <input type="radio" class="tabInput" value="" name="" />
                <span>新访客会看到</span>
              </li>
            </ul>
            <div class="tab-cursor" style="transform: translateX(0px); width: 84px"></div>
            <span class="tabInfo">
              <i class="iconfont icon-50"></i>
              <span>直播间会优先展示你的直播间</span>
            </span>
          </div>
        </div>
        <!-- 展示视频 -->
        <div class="content">
          <div class="videoWrapper">
            <a href="javascript:;" class="videoPlay">
              <img :src="topVideo.pic" alt="" class="videoImg" />
              <span class="videoDuration" v-if="topVideo.duration">{{
                moment(topVideo.duration * 1000).format('mm:ss')
              }}</span>
            </a>
            <div class="videoInfo">
              <a href="javascript:;" class="videoTitle">
                {{ topVideo.title }}
              </a>
              <div class="videoMeta">
                <span class="videoData">
                  <i class="iconfont icon-bofang icon"></i>
                  <span v-if="topVideo.stat">{{ localNum(topVideo.stat!.view,1) }}</span>
                </span>
                <span class="videoData">
                  <i class="iconfont icon-read icon"></i>
                  <span v-if="topVideo.stat">{{ topVideo.stat?.danmaku }}</span> </span
                ><span class="videoData">
                  <i class="iconfont icon-shijian icon"></i>
                  <span v-if="topVideo.pubdate">{{
                    moment(topVideo.pubdate * 1000).format('YYYY-MM-DD')
                  }}</span>
                </span>
              </div>
              <p class="videoDesc" title="">{{ topVideo.desc }}</p>
              <div class="btn-container">
                <ElButton type="primary" class="editBtn">编辑置顶</ElButton>
                <ElButton type="default" class="channlBtn">取消置顶</ElButton>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 我的视频 -->
      <div class="section myVideo">
        <div class="myVideo-title">
          <a href="javascript:;" class="t">{{ isMyPage ? '我' : 'TA' }}的视频</a>
          <span class="number">{{ contribute.page?.count }}</span>
          <a href="javascript:;" class="more">
            <span>更多</span>
            <i class="iconfont icon-jinrujiantou"></i>
          </a>
        </div>
        <div class="content">
          <div
            class="smallItem"
            v-for="myVideo in contribute.list?.vlist"
            :key="myVideo.typeid"
            @click="
              $router.push({ name: 'Video', query: { aid: myVideo?.aid, bvid: myVideo?.bvid } })
            "
          >
            <a href="javascript:;" class="videoPlay">
              <img :src="myVideo.pic" alt="" class="videoImg" />
              <span class="videoDuration">{{ myVideo.length }}</span>
            </a>

            <a href="javascript:;" class="videoTitle">
              {{ myVideo.title }}
            </a>
            <div class="videoMeta">
              <span class="videoData">
                <i class="iconfont icon-bofang icon"></i>
                <span>{{ localNum(myVideo.play, 1) }}</span>
              </span>
              <span class="videoData">
                <i class="iconfont icon-shijian icon"></i>
                <span>{{ moment(myVideo.created * 1000).format('YYYY-MM-DD') }}</span>
              </span>
            </div>
          </div>
        </div>
      </div>
      <!-- 我的栏目 -->
      <div class="section article">
        <div class="myVideo-title">
          <a href="javascript:;" class="t">{{ isMyPage ? '我' : 'TA' }}的专栏</a>
        </div>
      </div>
      <!-- 我的视频列表 -->
      <div class="section article">
        <div class="myVideo-title">
          <a href="javascript:;" class="t">{{ isMyPage ? '我' : 'TA' }}的视频列表</a>
        </div>
      </div>
      <!-- 最近投币的视频 -->
      <div class="section coin">
        <div class="myVideo-title">
          <a href="javascript:;" class="t">最近投币的视频</a>
          <span class="selfLook" v-if="isMyPage">
            <span class="iconfont icon-yincangbukejian"></span>
            <span>仅自己可见</span>
          </span>
        </div>
        <div class="content">
          <div
            class="smallItem"
            v-for="(coinVideo, index) in recentlyCoin"
            :key="index"
            @click="
              $router.push({ name: 'Video', query: { aid: coinVideo?.aid, bvid: coinVideo?.bvid } })
            "
          >
            <a href="javascript:;" class="videoPlay">
              <img :src="coinVideo?.pic" alt="" class="videoImg" />
              <span class="videoDuration">{{ moment(coinVideo?.duration).format('mm:ss') }}</span>
            </a>

            <a href="javascript:;" class="videoTitle"> {{ coinVideo?.title }} </a>
            <div class="videoMeta">
              <span class="videoData">
                <i class="iconfont icon-bofang icon"></i>
                <span>{{ localNum(coinVideo!.stat.view, 1) }}</span>
              </span>
              <span class="videoData">
                <i class="iconfont icon-shijian icon"></i>
                <span>{{ moment(coinVideo!.pubdate * 1000).format('YYYY-MM-DD') }}</span>
              </span>
            </div>
          </div>
        </div>
      </div>
      <!-- 最近点赞的视频 -->
      <div class="section coin">
        <div class="myVideo-title">
          <a href="javascript:;" class="t">最近点赞的视频</a>
          <span class="selfLook" v-if="isMyPage">
            <span class="iconfont icon-yincangbukejian"></span>
            <span>仅自己可见</span>
          </span>
        </div>
        <div class="content">
          <div class="smallItem">
            <a href="javascript:;" class="videoPlay">
              <img
                src="./image/9e0a6aa4c5b7bb5a73fc212905576f252d8351ee.jpg@560w_350h_100Q_1c.webp"
                alt=""
                class="videoImg"
              />
              <span class="videoDuration">04:30</span>
            </a>

            <a href="javascript:;" class="videoTitle">
              今天写完静态页面今天写完静态页面今天写完静态页面今天写完静态页面今天写完静态页面
            </a>
            <div class="videoMeta">
              <span class="videoData">
                <i class="iconfont icon-bofang icon"></i>
                <span>109</span>
              </span>
              <span class="videoData">
                <i class="iconfont icon-shijian icon"></i>
                <span>2021-12-1</span>
              </span>
            </div>
          </div>
          <div class="smallItem">
            <a href="javascript:;" class="videoPlay">
              <img
                src="./image/9e0a6aa4c5b7bb5a73fc212905576f252d8351ee.jpg@560w_350h_100Q_1c.webp"
                alt=""
                class="videoImg"
              />
              <span class="videoDuration">04:30</span>
            </a>

            <a href="javascript:;" class="videoTitle">
              今天写完静态页面今天写完静态页面今天写完静态页面今天写完静态页面今天写完静态页面
            </a>
            <div class="videoMeta">
              <span class="videoData">
                <i class="iconfont icon-bofang icon"></i>
                <span>109</span>
              </span>
              <span class="videoData">
                <i class="iconfont icon-shijian icon"></i>
                <span>2021-12-1</span>
              </span>
            </div>
          </div>
          <div class="smallItem">
            <a href="javascript:;" class="videoPlay">
              <img
                src="./image/9e0a6aa4c5b7bb5a73fc212905576f252d8351ee.jpg@560w_350h_100Q_1c.webp"
                alt=""
                class="videoImg"
              />
              <span class="videoDuration">04:30</span>
            </a>

            <a href="javascript:;" class="videoTitle">
              今天写完静态页面今天写完静态页面今天写完静态页面今天写完静态页面今天写完静态页面
            </a>
            <div class="videoMeta">
              <span class="videoData">
                <i class="iconfont icon-bofang icon"></i>
                <span>109</span>
              </span>
              <span class="videoData">
                <i class="iconfont icon-shijian icon"></i>
                <span>2021-12-1</span>
              </span>
            </div>
          </div>
          <div class="smallItem">
            <a href="javascript:;" class="videoPlay">
              <img
                src="./image/9e0a6aa4c5b7bb5a73fc212905576f252d8351ee.jpg@560w_350h_100Q_1c.webp"
                alt=""
                class="videoImg"
              />
              <span class="videoDuration">04:30</span>
            </a>

            <a href="javascript:;" class="videoTitle">
              今天写完静态页面今天写完静态页面今天写完静态页面今天写完静态页面今天写完静态页面
            </a>
            <div class="videoMeta">
              <span class="videoData">
                <i class="iconfont icon-bofang icon"></i>
                <span>109</span>
              </span>
              <span class="videoData">
                <i class="iconfont icon-shijian icon"></i>
                <span>2021-12-1</span>
              </span>
            </div>
          </div>
          <div class="smallItem">
            <a href="javascript:;" class="videoPlay">
              <img
                src="./image/9e0a6aa4c5b7bb5a73fc212905576f252d8351ee.jpg@560w_350h_100Q_1c.webp"
                alt=""
                class="videoImg"
              />
              <span class="videoDuration">04:30</span>
            </a>

            <a href="javascript:;" class="videoTitle">
              今天写完静态页面今天写完静态页面今天写完静态页面今天写完静态页面今天写完静态页面
            </a>
            <div class="videoMeta">
              <span class="videoData">
                <i class="iconfont icon-bofang icon"></i>
                <span>109</span>
              </span>
              <span class="videoData">
                <i class="iconfont icon-shijian icon"></i>
                <span>2021-12-1</span>
              </span>
            </div>
          </div>
          <div class="smallItem">
            <a href="javascript:;" class="videoPlay">
              <img
                src="./image/9e0a6aa4c5b7bb5a73fc212905576f252d8351ee.jpg@560w_350h_100Q_1c.webp"
                alt=""
                class="videoImg"
              />
              <span class="videoDuration">04:30</span>
            </a>

            <a href="javascript:;" class="videoTitle">
              今天写完静态页面今天写完静态页面今天写完静态页面今天写完静态页面今天写完静态页面
            </a>
            <div class="videoMeta">
              <span class="videoData">
                <i class="iconfont icon-bofang icon"></i>
                <span>109</span>
              </span>
              <span class="videoData">
                <i class="iconfont icon-shijian icon"></i>
                <span></span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 主页右边 -->
    <div class="pageRight">
      <!--哔哩哔哩认证 -->
      <div class="section" v-if="isMyPage">
        <div class="no-auth">
          <img
            src="./image/icon-auth.png"
            alt="获得 bilibili 认证，享受多重认证福利！"
            class="authImg"
          />
          <div class="auth-title">
            <a href="javascript:;" class="goto-auth">点此申请bilibili认证</a>
            <span>获得 bilibili 认证</span>
          </div>
        </div>
      </div>
      <!-- 创作中心 -->
      <div class="section i-m" v-if="isMyPage">
        <div class="i-m-r1">
          <a href="javascript:;" class="i-m-title">
            <span class="createCenter"></span>
            <span class="jinrufangxiang"></span>
          </a>
        </div>
        <div class="i-m-r2">
          <a href="javascript:;" class="i-m-btn i-m-upload">
            <span class="iconfont icon-icon_update"></span>
            <span>视频投稿</span>
          </a>
          <a href="javascript:;" class="i-m-btn">
            <span class="iconfont icon-wendangguanlixitong-wendangguanlixitongtubiao"></span>
            <span>内容管理</span>
          </a>
        </div>
      </div>
      <!-- 公告 -->
      <div class="section i-ann" v-if="isMyPage">
        <h3 class="section-title">公告</h3>
        <div class="container">
          <div class="be-textarea" id="i-ann-content">
            <textarea
              type="textarea"
              rows="4"
              placeholder="编辑我的空间公告"
              maxlength="150"
              class="be-textarea_inner"
            >
            </textarea>
            <div class="word-count">0/150</div>
          </div>
        </div>
      </div>
      <!-- 个人资料 -->
      <PersonalData />
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, onMounted } from 'vue'
  import { useRoute } from 'vue-router'

  export default defineComponent({
    name: 'Homepage',
  })
</script>

<script lang="ts" setup>
  import { ElButton } from 'element-plus'
  import PersonalData from '@/components/PersonalData/index.vue'
  import { useUserStore } from '@/store/moudles/user'

  const route = useRoute()

  const hostMid = Number(route.query.hostMid)

  const UserStore = useUserStore()

  const isMyPage = UserStore.mid === hostMid

  import {
    TopVideo,
    reqTopVideos,
    Contribute,
    reqContribute,
    reqRecentlyCoin,
    Notice,
    reqNotice,
  } from '@/api/personal'
  import { RegionModel } from '@/api/home'
  import moment from 'moment'
  import { localNum } from '@/utils/lib'
  const topVideo = ref<Partial<TopVideo>>({}) //置顶视频
  const contribute = ref<Partial<Contribute>>({}) //我的视频
  const recentlyCoin = ref<Partial<RegionModel[]>>([]) //最近投币视频
  const notice = ref<Partial<Notice>>({}) //空间公告
  async function getTopVideo(vmid: number) {
    try {
      topVideo.value = await reqTopVideos(vmid)
    } catch (error) {
      //有可能没有置顶视频，需要拦截一下错误
      console.log(error)
    }
  }
  async function getContribute(mid: number, pn: number) {
    contribute.value = await reqContribute(mid, pn)
  }
  //最近投币请求
  async function getRecentlyCoin(vmid: number) {
    try {
      recentlyCoin.value = await reqRecentlyCoin(vmid)
    } catch (error) {
      //有可能设置了隐私未公开，需要拦截一下错误
      console.log(error)
    }
  }
  //空间公告请求
  async function getNotice(mid: number) {
    notice.value = await reqNotice(mid)
  }
  onMounted(async () => {
    getTopVideo(hostMid)
    getContribute(hostMid, 1)
    getRecentlyCoin(hostMid)
    getNotice(hostMid)
  })
</script>

<style lang="less" scoped>
  .homepage {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    & a:hover {
      color: #23c9ed;
    }
    .pageLeft {
      width: 790px;
      padding: 15px 20px;
      background-color: #fff;
      .section {
        border-bottom: 1px solid #eee;
        margin-bottom: 17px;
        position: relative;
        padding-bottom: 20px;
        .topTabs {
          margin-bottom: 24px;
          .be-tab {
            margin-bottom: 15px;
            height: 25px;
            border-bottom: 1px solid #eee;
            position: relative;
            .tabInner {
              list-style: none;
              display: flex;
              align-items: center;
              .be-tab-item {
                padding-bottom: 5px;
                margin-right: 30px;
                font-size: 12px;
                position: relative;
                width: 95px;
                height: 28px;
                .tabInput {
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  margin: 0;
                  opacity: 0;
                  cursor: pointer;
                }
                span {
                  // display: block;
                  text-align: center;
                  line-height: 28px;
                }
              }
              .is-active {
                color: #00a1d6;
              }
            }
            .tab-cursor {
              position: absolute;
              bottom: 0;
              height: 0;
              left: 0;
              border-bottom: 1px solid #00a1d6;
            }
            .tab-cursor:after {
              position: absolute;
              bottom: 0;
              content: '';
              left: 50%;
              // transform: (-50%);
              margin-left: -3px;
              border-bottom: 3px solid #00a1d6;
              border-top: 0;
              border-left: 3px solid transparent;
              border-right: 3px solid transparent;
            }
            .tabInfo {
              position: absolute;
              right: 0;
              bottom: 0;
              color: #99a2aa;
              font-size: 12px;
              .icon-50 {
                font-size: 12px;
              }
            }
          }
        }
        //视频展示页
        .content {
          // max-height: 380px;
          // overflow: hidden;
          display: flex;
          flex-wrap: wrap;
          .videoWrapper {
            width: 790px;
            height: 175px;
            &:hover .btn-container {
              opacity: 1 !important;
            }
            .videoPlay {
              width: 280px;
              height: 175px;
              display: block;
              box-shadow: 0 0 0 1px #e5e9ef;
              border-radius: 4px;
              float: left;
              overflow: hidden;
              position: relative;
              .videoImg {
                width: 280px;
                height: 175px;
                border-radius: 4px;
              }
              .videoDuration {
                background: rgba(0, 0, 0, 0.5);
                border-radius: 5px 0 0 0;
                color: #fff;
                line-height: 20px;
                padding: 0 6px;
                position: absolute;
                right: 0;
                bottom: 0;
              }
            }
            .videoInfo {
              position: relative;
              height: 175px;
              margin-left: 300px;
              .videoTitle {
                display: block;
                font-size: 14px;
                line-height: 18px;
                margin-bottom: 15px;
                white-space: nowrap;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .videoMeta {
                width: 100%;
                color: #6d757a;
                margin-bottom: 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .videoData {
                  // margin-right: 20px;
                  .icon {
                    vertical-align: middle;
                    margin-right: 3px;
                    position: relative;
                    top: -2px;
                    color: #6d757a;
                  }
                }
              }
              .videoDesc {
                color: #99a2aa;
                margin-bottom: 10px;
                max-height: 40px;
                line-height: 20px;
                overflow: hidden;
              }
              .btn-container {
                opacity: 0;
                position: absolute;
                bottom: 0;
                transition: opacity 300ms;
                .editBtn {
                  background-color: #00a1d6;
                  margin-right: 20px;
                }
                .editBtn,
                .channlBtn {
                  width: 70px;
                  padding: 0 10px;
                  font-size: 12px;
                }
              }
            }
          }
        }

        //我的视频
        .myVideo-title {
          line-height: 33px;
          padding: 0 0 15px;
          position: relative;
          display: flex;
          align-items: center;
          & a:hover {
            color: #23c9ed;
            border-color: #23c9ed;
          }
          .t {
            font-size: 20px;
            font-weight: 350;
          }
          .selfLook {
            margin-left: 20px;
            color: #6d757a;
            font-size: 12px;
            vertical-align: middle;
          }
          .number {
            background: #f6fafb;
            border: 1px solid #ddd;
            border-radius: 3px;
            color: #777;
            display: inline-block;
            font-size: 12px;
            line-height: 18px;
            height: 18px;
            margin-left: 10px;
            padding: 0 5px;
            vertical-align: middle;
          }
          .more {
            position: absolute;
            right: 0;
            border: 1px solid #b8c0cc;
            border-radius: 4px;
            color: #6d757a;
            font-size: 12px;
            line-height: 22px;
            padding: 0 10px 0 10px;
          }
        }
        .smallItem,
        .coin {
          width: 160px;
          height: 164px;
          padding: 10px 30px 10px 0px;
          .videoPlay {
            width: 160px;
            height: 100px;
            display: block;
            box-shadow: 0 0 0 1px #e5e9ef;
            border-radius: 4px;
            float: left;
            overflow: hidden;
            position: relative;
            margin-bottom: 6px;
            .videoImg {
              width: 160px;
              height: 100px;
              border-radius: 4px;
            }
            .videoDuration {
              background: rgba(0, 0, 0, 0.5);
              border-radius: 5px 0 0 0;
              color: #fff;
              line-height: 20px;
              padding: 0 6px;
              position: absolute;
              right: 0;
              bottom: 0;
            }
          }

          .videoTitle {
            width: 160px;
            height: 38px;
            display: block;
            font-size: 12px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 6px;
          }
          .videoMeta {
            width: 100%;
            color: #6d757a;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .videoData {
              // margin-right: 10px;
              .icon {
                vertical-align: middle;
                margin-right: 3px;
                position: relative;
                top: -2px;
                color: #6d757a;
              }
            }
          }
        }
      }
    }
    .pageRight {
      float: right;
      width: 350px;
      margin-left: 20px;
      .section {
        background-color: #fff;
        border: 1px solid #eee;
        border-radius: 4px;
        padding: 15px 20px 18px;
        margin-bottom: 10px;
        //认证
        .no-auth {
          margin: -15px -20px -18px;

          .authImg {
            width: 99px;
            height: 70px;
            display: inline-block;
            vertical-align: middle;
          }
          .auth-title {
            display: inline-block;
            position: relative;
            top: 16px;
            left: 20px;
            .goto-auth {
              font-size: 18px;
              display: block;
              margin-bottom: 4px;
              color: #222;
              cursor: pointer;
            }
            span {
              color: #99a2aa;
              font-size: 12px;
            }
          }
        }
        // 创作中心
        .i-m-r1 {
          text-align: center;
          padding: 0 10px 13px;
          .i-m-title {
            display: inline-block;
            .createCenter {
              display: block;
              width: 120px;
              height: 34px;
              background-image: url('./image/icon_createCenters.png');
              background-size: 100% 100%;
              float: left;
            }
            .jinrufangxiang {
              display: block;
              width: 28px;
              height: 28px;
              background-image: url('.//image/right.png');
              background-size: 100% 100%;
              float: right;
              position: relative;
              top: 3px;
            }
          }
        }
        .i-m-r2 {
          border: 1px solid #e5e9ef;
          border-radius: 4px;
          padding: 7px 0;
          display: flex;
          align-items: center;
          .i-m-upload {
            border-right: 1px solid #e5e9ef;
          }
          .i-m-btn {
            display: block;
            color: #6d757a;
            text-align: center;
            width: 152px;
            line-height: 20px;
            // display: flex;
            // align-items: center;
            .icon-icon_update,
            .icon-wendangguanlixitong-wendangguanlixitongtubiao {
              width: 18px;
              height: 18px;
              margin-right: 6px;
              vertical-align: middle;
            }
          }
        }
        //公告
        .section-title {
          border-bottom: 1px solid #e5e9ef;
          font-size: 14px;
          font-weight: 700;
          margin: -15px 0 10px;
          height: 45px;
          line-height: 45px;
        }
        .container {
          .i-ann-content {
            color: #6d757a;
            line-height: 20px;
          }
          .be-textarea {
            position: relative;
            font-size: 14px;
            border-radius: 4px;
            .be-textarea_inner {
              display: block;
              outline: none;
              resize: none;
              transition: all 0.3s ease;
            }
          }
          #i-ann-content textarea {
            width: 306px;
            height: 172px;
            color: #6d757a;
            font-size: 12px;
            font-family: Microsoft Yahei;
            line-height: 20px;
            padding: 10px;
            margin: -10px 0 0 -11px;
            border: 1px solid transparent;
            border-radius: 4px;
            box-sizing: content-box;
          }
          .word-count {
            position: absolute;
            right: 0;
            bottom: 0;
            height: 30px;
            min-width: 40px;
            padding: 0 10px;
            line-height: 30px;
            text-align: center;
            font-size: 12px;
            color: #99a2aa;
            border-radius: 4px;
            opacity: 0;
            transition: opacity 0.2s ease;
          }
          #i-ann-content textarea:focus,
          #i-ann-content textarea:hover {
            border-color: #00a1d6;
          }
          .be-textarea_inner:focus ~ .word-count,
          .be-textarea_inner:hover ~ .word-count {
            opacity: 1;
          }
        }
        //个人资料
        // .user-info-title {
        //   display: flex;
        //   justify-content: space-between;
        //   box-sizing: border-box;
        //   padding-bottom: 18px;
        //   border-bottom: 1px solid #e5e9ef;
        //   margin-bottom: 20px;
        //   .info-title {
        //     line-height: 23px;
        //     font-size: 14px;
        //     color: #222;
        //   }
        //   .change-info {
        //     display: inline-block;
        //     width: 56px;
        //     height: 22px;
        //     color: #9499a0;
        //     border: 0.5px solid #c0c9d4;
        //     text-align: center;
        //     font-size: 12px;
        //     line-height: 22px;
        //     border-radius: 4px;
        //   }
        // }
        // .info-personal {
        //   width: 308px;
        //   height: 21px;
        //   .info-uid,
        //   .info-birch {
        //     display: inline-block;
        //     width: 150px;
        //     .info-command {
        //       display: inline-block;
        //       width: 24px;
        //       font-size: 12px;
        //       line-height: 16px;
        //       color: #9499a0;
        //       margin-right: 16px;
        //     }
        //     .info-value {
        //       color: #6d757a;
        //       font-size: 12px;
        //       line-height: 16px;
        //       padding-right: 15px;
        //     }
        //     .icon-yincangbukejian {
        //       color: #c9ccd0;
        //       font-size: 12px;
        //       line-height: 20px;
        //     }
        //   }
        // }
      }
    }
  }
</style>
